<template>
  <div id="printBox"
       ref="print"
       class="transport"
       style="width:94.2%;">
    <template v-for="(items, num) in pages">
      <div :key="num">
        <div style="text-align: center;font-weight: bold;font-size: 16px;">
          加加食品集团股份有限公司配送单
        </div>
        <div style="font-size: 12px; padding-left: 55%; margin-top:5px;">
          编号:{{ form.contractNo }}
          <span style="float: right;">第{{ num + 1 }}页\共{{ pages }}页</span>
        </div>
        <table style="width: 100%; font-size: 12px; font-weight: 100; border: 1px solid #000; border-collapse: collapse; table-layout: fixed;">
          <tr>
            <th style="font-weight: bold !important; width:3%; padding: 2px; border: 1px solid #000;"
                rowspan="4">发货方</th>
            <th style="width:12%; font-weight: 100; padding: 2px; border: 1px solid #000;">发货方名称</th>
            <th style="text-align: left; width:34%; font-weight: 100; padding: 2px; border: 1px solid #000;">
              <!-- {{
              form.customerName && form.customerName.indexOf("线下客户-") > -1
                ? form.customerName.split("线下客户-")[1]
                : form.customerName
            }} -->
              {{ form.customer && form.customer.customerName }}
            </th>
            <th style="font-weight: bold !important; width:3%; padding: 2px; border: 1px solid #000;"
                rowspan="4">收货方</th>
            <th style="width:13%; font-weight: 100; padding: 2px; border: 1px solid #000;">客户简称</th>
            <th style="text-align: left; width:36%; font-weight: 100; padding: 2px; border: 1px solid #000;">{{ form.consignee && form.consignee.consigneeName }}</th>
          </tr>
          <tr>
            <th style="font-weight: 100; padding: 2px; border: 1px solid #000;">发货联系人</th>
            <th style="text-align: left; font-weight: 100; padding: 2px; border: 1px solid #000;">{{ form.fromContact && form.fromContact.contactName }}</th>
            <th style="font-weight: 100; padding: 2px; border: 1px solid #000;">收货联系人</th>
            <th style="text-align: left; font-weight: 100; padding: 2px; border: 1px solid #000;">{{ form.toContact && form.toContact.contactName }}</th>
          </tr>
          <tr>
            <th style="font-weight: 100; padding: 2px; border: 1px solid #000;">联系电话</th>
            <th style="text-align: left; font-weight: 100; padding: 2px; border: 1px solid #000;">{{ form.fromContact && form.fromContact.contactMobile  }}</th>
            <th style="font-weight: 100; padding: 2px; border: 1px solid #000;">联系电话</th>
            <th style="text-align: left; font-weight: 100; padding: 2px; border: 1px solid #000;">{{ form.toContact && form.toContact.contactMobile }}</th>
          </tr>
          <tr>
            <th style="font-weight: 100; padding: 2px; border: 1px solid #000;">发货地址</th>
            <th v-if="form.fromAddress"
                style="text-align: left; font-weight: 100; padding: 2px; border: 1px solid #000;">
              <span style="display: inline-block;max-height: 30px;overflow: hidden;">{{ form.fromAddress.province }}{{ form.fromAddress.city }}{{ form.fromAddress.district}}{{ form.fromAddress.address }}</span>
            </th>
            <th style="font-weight: 100; padding: 2px; border: 1px solid #000;">收货地址</th>
            <th v-if="form.toAddress"
                style="text-align: left; font-weight: 100; padding: 2px; border: 1px solid #000;">
              <span style="display: inline-block;max-height: 30px;overflow: hidden;">{{ form.toAddress.province }}{{ form.toAddress.city }}{{ form.toAddress.district}}{{ form.toAddress.address }}</span>
            </th>
          </tr>
        </table>
        <table style="width: 100%; font-size: 12px; border-collapse: collapse;">
          <tr>
            <th style="font-weight: bold !important; width:9%; padding: 2px; border: 1px solid #000; border-top: 0px solid #000;">承运方</th>
            <th style="width:24.4%; font-weight: 100; padding: 2px; border: 1px solid #000; border-top: 0px solid #000;">
              <span style="display: inline-block;max-height: 26px;overflow: hidden;">{{ form.carrier && form.carrier.carrierName }}</span>
            </th>
            <th style="font-weight: bold !important; width:9%; padding: 2px; border: 1px solid #000; border-top: 0px solid #000;">承运人</th>
            <th style="width:10%; font-weight: 100; padding: 2px; border: 1px solid #000; border-top: 0px solid #000;">
              {{ form.pickCovenant && form.pickCovenant.driverName }}
            </th>
            <th style="width:13%; font-weight: 100; padding: 2px; border: 1px solid #000; border-top: 0px solid #000;">承运电话</th>
            <th style="width:12.6%; font-weight: 100; padding: 2px; border: 1px solid #000; border-top: 0px solid #000;">{{ form.pickCovenant && form.pickCovenant.contactMobile }}</th>
            <th style="width:9%; font-weight: 100; padding: 2px; border: 1px solid #000; border-top: 0px solid #000;">车牌号码</th>
            <th style="width:14%; font-weight: 100; padding: 2px; border: 1px solid #000; border-top: 0px solid #000;">{{ form.pickCovenant && form.pickCovenant.plateNo }}</th>
          </tr>
          <tr>
            <th style="width:9%; font-weight: 100; padding: 2px; border: 1px solid #000;">备注</th>
            <th style="width:81%; text-align: left; font-weight: 100; padding: 2px; border: 1px solid #000;"
                colspan="7">
              {{ form.desc }}
            </th>
          </tr>
          <tr>
            <th style="width:9%; font-weight: 100; padding: 2px; border: 1px solid #000;">订单号码</th>
            <th v-if="form.sdNumber && form.netNumber"
                style="width:81%; text-align: left; font-weight: 100; padding: 2px; border: 1px solid #000;"
                colspan="7">
              {{ form.sdNumber }}/{{ form.netNumber }}
            </th>
            <th v-else
                style="width:81%;text-align: left; font-weight: 100; padding: 2px; border: 1px solid #000;"
                colspan="7">
              {{ form.sdNumber || form.netNumber }}
            </th>
          </tr>
          <tr>
            <th style="width:9%; font-weight: 100; padding: 2px; border: 1px solid #000;">配送单号</th>
            <th style="width:40.5%; text-align: left; font-weight: 100; padding: 2px; border: 1px solid #000;"
                colspan="3">
              {{ form.contractNo }}
            </th>
            <th style="width:9%; font-weight: 100; padding: 2px; border: 1px solid #000;">总重量</th>
            <th style="width:40.5%; text-align: left; font-weight: 100; padding: 2px; border: 1px solid #000;"
                colspan="3">
              {{ form.totalWeight }}&nbsp;&nbsp;吨
            </th>
          </tr>
        </table>
        <table style="width: 100%; font-size: 10px; border-collapse: collapse; min-height:200px;">
          <thead>
            <tr>
              <th style="width:30%;font-weight: 100; padding: 5px 2px; border: 1px solid #000; border-top: 0px solid #000;">品名规格</th>
              <th style="width:5%; font-weight: 100; padding: 3px 2px; border: 1px solid #000; border-top: 0px solid #000;">单位</th>
              <th style="width:6%; font-weight: 100; padding: 3px 2px; border: 1px solid #000; border-top: 0px solid #000;">数量</th>
              <th style="width:7%; font-weight: 100; padding: 3px 2px; border: 1px solid #000; border-top: 0px solid #000;">实签数</th>
              <th style="width:7%; font-weight: 100; padding: 3px 2px; border: 1px solid #000; border-top: 0px solid #000;">异常数</th>
              <th style="width:14%; font-weight: 100; padding: 3px 2px; border: 1px solid #000; border-top: 0px solid #000;">异常描述</th>
              <th style="width:14%; font-weight: 100; padding: 3px 2px; border: 1px solid #000; border-top: 0px solid #000;;">提货仓库</th>
              <th style="width:19%; font-weight: 100; padding: 3px 2px; border: 1px solid #000; border-top: 0px solid #000;">备注</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in goodsArr[num]"
                :key="index+item.name">
              <th style="text-align: left; font-weight: 100; padding: 3px 2px; border: 1px solid #000;height:22px;">
                <span style="display: inline-block;max-height: 26px;overflow: hidden;">{{ item.name }}</span>
              </th>
              <th style="font-weight: 100; padding: 3px 2px; border: 1px solid #000;">{{ item.unit }}</th>
              <th style="font-weight: 100; padding: 3px 2px; border: 1px solid #000;">{{ item.qty }}</th>
              <th style="font-weight: 100; padding: 3px 2px; border: 1px solid #000;"></th>
              <th style="font-weight: 100; padding: 3px 2px; border: 1px solid #000;"></th>
              <th style="font-weight: 100; padding: 3px 2px; border: 1px solid #000;"></th>
              <th style="text-align: left;word-break: keep-all;white-space: nowrap;overflow: hidden;text-overflow: clip;
            font-weight: 100; padding: 3px 2px; border: 1px solid #000;">
                {{ item.factoryName }}
              </th>
              <th style="font-weight: 100; padding: 3px 2px; border: 1px solid #000;"></th>
            </tr>
            <!-- 针对没有segmentation个物品的订单新增空的 -->
            <tr v-for="(item, i) in pageSize - goodsArr[num].length"
                :key="i">
              <th v-for="(items, indexs) in 8"
                  :key="indexs"
                  style="font-weight: 100; padding: 2px; border: 1px solid #000;">&nbsp;</th>
            </tr>
            <tr>
              <th colspan="2"
                  style="font-weight: 100; padding: 2px; border: 1px solid #000;">合计</th>
              <th style="font-weight: 100; padding: 2px; border: 1px solid #000;">{{ pagesQty[num] }}</th>
              <th style="font-weight: 100; padding: 2px; border: 1px solid #000;"></th>
              <th style="font-weight: 100; padding: 2px; border: 1px solid #000;"></th>
              <th style="font-weight: 100; padding: 2px; border: 1px solid #000;"></th>
              <th style="font-weight: 100; padding: 2px; border: 1px solid #000;"></th>
              <th style="font-weight: 100; padding: 2px; border: 1px solid #000;"></th>
            </tr>
          </tbody>
        </table>
        <table style="width: 100%; font-size: 12px; border-collapse: collapse;">
          <tr>
            <th style="font-weight: 100; border: 1px solid #000; border-top: 0px solid #000; padding: 3px 0;width:21%">客户签收及意见反馈</th>
            <th style="font-weight: 100; border: 1px solid #000; border-top: 0px solid #000; padding: 3px 0;width:79%"
                colspan="3"></th>
          </tr>
          <tr>
            <th style="font-weight: 100; border: 1px solid #000; padding: 3px 0; width:21%">物流现场操作员签字</th>
            <th style="font-weight: 100; border: 1px solid #000; padding: 3px 0;width:24%"></th>
            <th style="font-weight: 100; border: 1px solid #000; padding: 3px 0;width:28%">司机签名确认</th>
            <th style="font-weight: 100; border: 1px solid #000; padding: 3px 0;width:27%"></th>
          </tr>
          <tr>
            <th style="font-weight: 100; border: 1px solid #000; padding: 3px 0;width:21%">最后发货员签字</th>
            <th style="font-weight: 100; border: 1px solid #000; padding: 3px 0;width:24%"></th>
            <th style="font-weight: 100; border: 1px solid #000; padding: 3px 0;width:28%">发车时间</th>
            <th style="font-weight: 100; border: 1px solid #000; padding: 3px 0;width:27%"></th>
          </tr>
          <tr>
            <th style="font-weight: 100; border: 1px solid #000; padding: 3px 0;width:21%">收货人签名盖章</th>
            <th style="font-weight: 100; border: 1px solid #000; padding: 3px 0;width:24%"></th>
            <th style="font-weight: 100; border: 1px solid #000; padding: 3px 0;width:28%">到货时间</th>
            <th style="font-weight: 100; border: 1px solid #000; padding: 3px 0;width:27%"></th>
          </tr>
        </table>
        <div>
          <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 5px;">
            <div style="font-size: 12px; clear: both;">
              <label>制单人: {{ user && user.name }}</label>
            </div>
            <div style="font-size: 12px; clear: both;">
              <label>复核人:</label>
            </div>
            <div style="font-size: 12px; clear: both;">
              <label>打印时间: {{ $moment(new Date()).format("YYYY-MM-DD HH:mm:ss") }}</label>
            </div>
          </div>
          <div style="margin-top: 5px; font-size: 12px; clear: both;">
            尊敬的客户：收货时请您仔细核对订货品名规格、数量，将实签数、异常数、异常描述如实填写在此单据上，盖章确认。若发现货物缺少或是破损，请您当面向承运司机索赔，如果索赔不能落实，请您在收货24小时内告知我司物流部运输中心，并将此单请传真到0731-81820272。我们将及时为您处理，逾期则可能无法妥善解决，敬请谅解！
          </div>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import { transport, jiajia } from "@/api/index";
export default {
  name: "JiajiaPrint",
  data () {
    return {
      form: {},
      goodsList: [],
      pagesQty: [],
      userInfo: sessionStorage.getItem('userInfo')
    };
  },
  computed: {
    user () {
      return JSON.parse(this.userInfo)
    },
    waybillId () {
      return this.$route.query?.waybillId
    },
    orderId () {
      return this.$route.query?.orderId
    },
    pageSize () {
      return 7
    },
    pages () {
      return Math.ceil(this.goodsList.length / this.pageSize)
    },
    goodsArr () {
      let res = [];
      let qtys = [];
      for (let i = 0; i < this.pages; i++) {
        let pageQty = 0;
        let temp = this.goodsList.slice(i * this.pageSize, i * this.pageSize + this.pageSize);
        // 计算单页数量
        temp.map(item => {
          pageQty += item.qty || 0;
        })
        qtys.push(pageQty);
        this.pagesQty = qtys;
        res.push(JSON.parse(JSON.stringify(temp)));
      }
      console.log("=====>goodsArr", res, this.pagesQty)
      return res;
    }
  },
  created () {
    this.loadWaybill();
  },
  methods: {
    async loadWaybill () {
      let { data } = await transport.getDetail(this.waybillId || this.orderId);
      this.form = data;
      this.form.totalWeight = (data.waybillCache.calculateWeight * 1000) / 1000000;
      this.goodsList = data.goodsList.map(item => {
        return {
          goodsId: item.goodsId,
          batchNo: item.batchNo,
          unit: item.goodsUnitName,
          qty: item.quantity,
          name: item.goodsName,
        }
      });
      this.loadJiajiaOrder(this.goodsList || []);
      this.print();
    },
    async loadJiajiaOrder (orderGoods) {
      let { data } = await jiajia.loadJiajiaOrder({ orderId: this.orderId });
      if (data) {
        this.form = { ...this.form, sdNumber: data.onlineNumber, netNumber: data.offlineNumber };
        let goodsArray = [];
        orderGoods.map(item => {
          data?.goodsList.map(ele => {
            if (item.goodsId === ele.goodsId && item.batchNo === ele.batchNo) {
              goodsArray.push({
                ...item,
                factoryName: ele.factoryName
              })
            }
          })
        })
        this.sortArr(goodsArray);
      }
    },
    sortArr (list) {
      console.log("+===>goodsArray", list)
      // 按物品名称排序，名称长的排前面
      list.sort((a, b) => b.name.length - a.name.length);
      // 以名称是否超15字符分成两组
      const longNames = list.filter((item) => item.name.length > 15);
      const shortNames = list.filter((item) => item.name.length < 15);
      console.log("======longNames", longNames, shortNames);
      // 长名称数组转二维数组，每组3条数据，除最后的一组数组且长度小于3外，每组数据push空对象做留白
      let segmentationNum = 3;
      let pagesN = Math.ceil(longNames.length / segmentationNum);
      let twoDimensionalArray = [];
      for (let i = 0; i < pagesN; i++) {
        let temp = longNames.slice(i * segmentationNum, i * segmentationNum + segmentationNum);
        twoDimensionalArray.push(JSON.parse(JSON.stringify(temp)));
      }
      twoDimensionalArray.forEach((item, index) => {
        if (index === twoDimensionalArray.length - 1 && item.length < 3) {
          return
        } else {
          item.push({})
        }
      })
      // 二维数组转一维数组
      let resArr = twoDimensionalArray.reduce((a, b) => a.concat(b))
      // 合并短名称数组
      resArr = resArr.concat(shortNames);
      let arr = []
      resArr.map(item => {
        // 物品名称过长处理
        if (item.name && item.name.length > 15) {
          arr.push({
            ...item,
            name: item.name.substring(0, 15)
          }, {
            name: item.name.substring(15, item.name.length)
          })
        } else {
          arr.push(item.name ? { ...item } : {})
        }
      })

      this.goodsList = arr;
      // this.print();
    },
    print () {
      setTimeout(() => {
        this.$print(this.$refs.print)
      }, 1000);
    }
  }
};
</script>
<style lang="scss" scoped>
#printBox {
  transform: scale(1);
}
@media print {
  .transport {
    page-break-after: always;
    width: 100%;
    padding: 0px 10px;
    margin: 0 auto;
    box-sizing: border-box;
    height: 100%;
  }
}
@media screen {
  .transport {
    display: none;
  }
}
</style>
